<template>
	<view class="content">
		<view class="topbackgroundbox">
			<view class="topsmallbox"></view>
		</view>	
		<view class="box">
			
		</view>
		
		<view class="Issueticketsbox">
				<view class="Issuetickets">
			
				<view class="Issueticketsleft"> <image src="../../static/完成.png" mode=""></image> </view>
				<view class="Issueticketsright">
					<text class="H3">出票成功</text>
					<text class="fize">请您持购票证件在车站或代售电取票后按时乘车</text>
				</view>
			</view>
		</view>
		<view class="Ticketcollection">
			<view class="view1">取票号 ： BW123455</view>
			<view class="view2">
				<view class="le">
					<text>06月15日周二</text>
					<text class="H2">06:24</text>
					<view class="size">
						<text>合肥南</text> 
						<image src="../../static/地标.png" mode=""></image> </view>
				</view>
				<view class="ce">
					
					<view class="div">经停信息</view>
					<text>G7740</text>
				</view>
				<view class="ri">
					<text>06月15日周二</text>
					<text class="H2">07:21</text>
					<view class="size size1">
						<image src="../../static/地标.png"></image>
						<text>南京南</text>
						</view></view>
			</view>
			<view class="v">
			<view class="view3">
				
					<view class="view3top">
					<view class="view3topleft">
						<view>
							<text class="name">王一默</text><text class="adult">成人票</text>
						</view>
						<view class="id">
							身份证123456**********28
						</view>
					</view>
					<view class="view3topright">
						<view>
							<text class="one">一等座￥107</text>
						</view>
						<view class="id">
							<text class="kao">靠窗</text><text>03车厢16A号</text>
						</view>
					</view>
				</view>
				</view>
				<view class="Issue">出票成功</view>
				</view>
				
			</view>
		<!-- 订单号 -->
			<view class="box1">
				<view class="small1">
					<view class="smalltop">
						<text>订单号</text>
						<text>E369941878</text>
					</view>
					<view class="smallbutton">
						<text>通知手机</text>
						<text>12345678901</text>
					</view>
				</view>
			</view>
			<view class="box1">
				<view class="small1">
					<view class="smalltop">
						<text>成人票</text>
						<text>￥107x1长</text>
					</view>
					<view class="smallbutton">
						<text>订单总计</text>
						<text class="color">￥<text class="price">107</text></text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				arr:[],
				fan:"<"
			}
		},
		methods: {
			fanhui(){
				uni.navigateBack(-1)
			}
		},
		onLoad(options){
			// const item = JSON.parse(decodeURIComponent(options.type));
			// this.arr=item
			// console.log(this.arr);
		}
	}
</script>

<style>
	.content{
		font-family: "微软雅黑";
	}
	.topbackgroundbox{
		background: rgb(0,172,189);
		width: 100%;
		height: 520rpx;
		padding-top:467rpx;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		z-index: -999;
	}
	.box{
		height: 80rpx;width: 100%;
	}
	.order{
		height: 100rpx;width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		color:#fff;
		font-size: 18px;
		font-family: Regular;
		position: relative;
		
	}
	.left{
		position: absolute;left: 50rpx;
	}
	.topsmallbox{
		background: rgb(0,172,189);
		width: 100%;
		height: 100rpx;
		border-radius: 50%;
	}
	.Issueticketsbox{
		width: 100%;
		display: flex;
		justify-content: center;
	}
	.Issuetickets{
		display: flex;
		align-items: center;
		color: #fff;
		height: 170rpx;
	}
	.Issueticketsleft{
		height: 90rpx;
		display: flex;
		align-items: center;
	}
	.Issueticketsleft image{
		width: 70rpx;
		height: 70rpx;
	}
	.Issueticketsright{
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
		height: 90rpx;
	}
	.H3{
		font-size: 22px;
	}
	.H2{
		font-size: 22px;
		font-weight: 800;
	}
	.fize{
		font-size: 12px;
		font-weight: 100;
	}
	.size{
		font-size: 15px;
		font-weight: 600;
		display: flex;
		
	}
	.size1{
		justify-content: flex-end;
	}
	.size image {
		width: 35rpx;
		height: 35rpx;
	}
	.Ticketcollection{
		width: 94%;
		background: #fff;
		margin-left: 3%;
		border-radius: 20rpx;
		box-shadow: 0 0 10px rgba(200,200,200,0.5);
		padding: 10px;
		
	}
	.view1{
		font-weight: 600;
		margin-bottom: 15rpx;
	}
	.view2{
		display: flex;
		justify-content: space-between;
		
	}
	.le{
		display: flex;
		flex-direction: column;
	}
	.ce{
		padding-top: 32rpx;
		box-sizing: border-box;
		align-items: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		
	}
	.ce text{
		margin-top: 10rpx;
		font-weight: 500;
		font-size: 14px;
	}
	.ri{
		display: flex;
		flex-direction: column;
		text-align: end;
		
	}
	.div{
		padding: 12rpx 25rpx;
		border: 1px #ccc solid;
		border-radius: 35rpx;
	}
	.view3{
		margin-top: 15rpx;
		width: 100%;
		background: rgb(245,245,245);
		padding: 30rpx;
		display: flex;
	}
	.view3top{
		width: 100%;
		display: flex;
		justify-content: space-between;
		
	}
	.name{
		font-size: 18px;
		font-weight: 800;
	}
	.adult{
		font-size: 12px;
		padding: 5rpx;
		border: 1px solid #ccc;
		border-radius: 2px;
		margin-left: 20rpx;
		color: rgb(161,155,170);
	}
	.one{
		font-size: 16px;
	}
	.view3topleft .id{
		margin-top: 20rpx;
		font-size: 12px;
	}
	.view3topright{
		text-align: end;
		display: flex;
		flex-direction: column;
		}
	.view3topright .id{
		font-size: 12px;
		margin-top: 20rpx;
	}
	.kao{
		font-size: 12px;
		padding:  5rpx 10rpx;
		border: 1px solid rgb(122,211,163);
		border-radius: 2px;
		margin-left: 20rpx;
		color: rgb(122,211,163);
		margin-right: 15rpx;
	}.v{
		background: rgb(245,245,245);
	}.Issue{
		margin-left: 30rpx;
		padding-bottom: 40rpx;
		color: rgb(122,211,163);
	}
	.box1{
		padding: 30rpx;
		background: #fff;
		width: 94%;
		margin-left: 3%;
		margin-top: 10rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
	}
	.small1{
		height: 180rpx;
	}
	.smalltop{
		display: flex;
		justify-content: space-between;
		height: 90rpx;
		align-items: center;
		border-bottom: #ccc 1px solid;
	}
	.smallbutton{
		display: flex;
		justify-content: space-between;
		height: 90rpx;
		align-items: center;
	}
	.color{
		color: #FF8D41;
		
	}
	.price{
		font-size: 18px;
		font-weight: 800;
	}
</style>
